<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>违法学习</title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.0.2/weui.min.css"/>

    <style>

        .page {
            background-color: #F8F8F8;
        }

        .page__hd {
            padding: 10px;
        }

        .hide {
            display: none;
        }
        .weui-cells__title{
            color:#3366FF;
        }

    </style>

    <script src="http://api.map.baidu.com/api?v=2.0&ak=BIMkrVrXh34doklbzbUpxEpZvb7zNOtS"></script>
</head>
<body>
<div class="container">
    <div class="page">
        <div class="page__hd">
        </div>
        <div class="page__bd">

            <div class="weui-cells__title">警员警号</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input id="input_pid" class="weui-input" type="text" placeholder="请输入警号"/>
                    </div>
                </div>
            </div>
            <div class="weui-cells__title">违法人姓名</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input id="input_violator_name" class="weui-input" type="text" placeholder="请输入姓名"/>
                    </div>
                </div>
            </div>
            <div class="weui-cells__title">违法人身份证号</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input id="input_violator_idcard" class="weui-input" type="text" placeholder="请输入身份证号"/>
                    </div>
                </div>
            </div>
            <div class="weui-cells__title">违法人电话号码</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input id="input_violator_tel" class="weui-input" type="text" placeholder="请输入违法人电话号码"/>
                    </div>
                </div>
            </div>

            <div class="weui-cells__title">违法行为代码</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <select class="weui-cell__bd" id="input_violation_code" class="weui-input">
                           <?php foreach ($code as $code): ?>
                            <option  value="<?=$code['code'] ?>"><?=$code['code'] ?></option>
                           <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:" id="submit">开始答题</a>
            </div>

            <div style="display: none;" id="dialog_alert">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
                    <div class="weui-dialog__bd">弹窗内容，告知当前页面信息等</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
                    </div>
                </div>
            </div>

            <div class="js_dialog hide" id="dialog_confirm">
                <div class="weui-mask"></div>
                <div class="weui-dialog">
                    <div class="weui-dialog__hd"><strong class="weui-dialog__title">警告</strong></div>
                    <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                    <div class="weui-dialog__ft">
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">查看详情</a>
                        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
                    </div>
                </div>
            </div>

            <div id="toast_loading" style="display:none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content">数据加载中</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/static/js/IDValidator.min.js"></script>
<script>
    var currUrl = window.location.href.replace(window.location.hash, '');
    $.getJSON('/wx/signature?url=' + encodeURIComponent(currUrl)).done(function (data) {
        wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
                'getLocation'
            ]
        });
    }).error(function (a) {

    });

    function translateCallback(data) {

        if (data.status === 0) {
            var pid = $("#input_pid").val().trim();
            var violator_idcard = $("#input_violator_idcard").val().trim();
            var violator_name = $("#input_violator_name").val().trim();
            var violator_tel = $("#input_violator_tel").val().trim();
            var violation_code = $("#input_violation_code").val().trim();
            var lng = data.points[0].lng;
            var lat = data.points[0].lat;

            $.post("/wx/wzdj",
                {
                    lng: lng,
                    lat: lat,
                    pid: pid,
                    violator_idcard: violator_idcard,
                    violator_name: violator_name,
                    violator_tel: violator_tel,
                    violation_code: violation_code
                },
                function (r) {

                    $("#toast_loading").fadeOut(200);

                    if (r["code"] == 200) {
                        $("#dialog_confirm .weui-dialog__bd").text("历史违法教育次数：" + r["data"].length);
                        $("#dialog_confirm").show();
                        $('#dialog_confirm .weui-dialog__btn_default').click(function () {
                            $("#dialog_alert").fadeOut(200);
                            window.location.href = "/wx/wzjl/" + violator_idcard;
                        });

                        $('#dialog_confirm .weui-dialog__btn_primary').click(function () {
                            $("#dialog_alert").fadeOut(200);
                            window.location.href = "/wx/wzks/<?= $next ?>";
                        });
                    }
                    else {
                        $("#dialog_alert .weui-dialog__title").text("错误");
                        $("#dialog_alert .weui-dialog__bd").text(r["message"]);
                        $("#dialog_alert").fadeIn(200);
                    }
                }
            ).error(function () {
                $("#toast_loading").fadeOut(200);
                $("#dialog_alert .weui-dialog__title").text("错误");
                $("#dialog_alert .weui-dialog__bd").text("请求失败，请确认网络连接是否正常");
                $("#dialog_alert").fadeIn(200);
            });

        }
        else {

            $("#toast_loading").fadeOut(200);

            $("#dialog_alert .weui-dialog__title").text("提示");
            $("#dialog_alert .weui-dialog__bd").text("请开启手机和微信的定位功能");
            $("#dialog_alert").fadeIn(200);
        }
    }

    wx.ready(function () {
        $("#submit").click(function () {

            var pid = $("#input_pid").val().trim();
            var violator_idcard = $("#input_violator_idcard").val().trim();
            var violator_tel = $("#input_violator_tel").val().trim();
            var violation_code = $("#input_violation_code").val().trim();
            if (pid.length < 6) {
                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("请填写正确的警员警号");
                $("#dialog_alert").fadeIn(200);
                return;
            }

            if (violator_tel.length != 11) {
                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("请填写正确的手机号码");
                $("#dialog_alert").fadeIn(200);
                return;
            }

            if (!new IDValidator().isValid(violator_idcard)) {
                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("请填写正确的身份证号");
                $("#dialog_alert").fadeIn(200);
                return;
            }

            if (violation_code.length == 0) {
                $("#dialog_alert .weui-dialog__title").text("提示");
                $("#dialog_alert .weui-dialog__bd").text("请填写正确的违法编码");
                $("#dialog_alert").fadeIn(200);
                return;
            }

            $("#toast_loading").fadeIn(200);

            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var ggPoint = new BMap.Point(longitude, latitude);  //创建点坐标
                    var pointArr = [];
                    pointArr.push(ggPoint);

                    var convertor = new BMap.Convertor();
                    convertor.translate(pointArr, 1, 5, translateCallback);
                }
            });
        });


    });

    $('#dialog_alert .weui-dialog__btn').click(function () {
        $("#dialog_alert").fadeOut(200);
    });
</script>
</body>
</html>